<template>
  <div class="zhu">
    <el-row :gutter="10">
      <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="4"
        ><div class="grid-content bg-purple">

            <div class="lianxi">
          <div class="countdown-title">限时秒杀</div>
          <div>
            <i class="el-icon-timer"></i>
            <div class="countdown-desc">
              <strong>{{ this.hour }}:00</strong>点场 距结束
            </div>
            <van-count-down millisecond :time="time" format="HH:mm:ss:SS">
              <template #default="timeData" format="HH:mm:ss:SS">
                <span class="timmer countdown-main"
                  ><span class="timmer__unit timmer__unit--hour">{{
                    timeData.minutes
                  }}</span
                  ><span class="timmer__unit timmer__unit--minute">{{
                    timeData.seconds
                  }}</span
                  ><span class="timmer__unit timmer__unit--second">{{
                    timeData.milliseconds
                  }}</span></span
                >
              </template>
            </van-count-down>
          </div>
        </div>
        </div>

        
      
        </el-col
      >
      <el-col :xs="14" :sm="18" :md="18" :lg="15" :xl="20">
        
      <div class="grid-content bg-purple">

        <div class="swiper-container"  ref="hh" style=" width: 1070px;">
          <div class="swiper-wrapper" >
            <div
              class="swiper-slide"
              v-for="item in bookList"
              :key="item.bookId"
            >
              <router-link
                :to="{ path: '/book', query: { id: item.isbn } }"
                @click.native="dianji(item.bookId)"
              >
                <el-image
                  style="width: 125px; height: 145px; margin-top:20px"
                  :src="item.img"
                  fit="fill"
                ></el-image>
                <p>{{ item.title }}</p>
                <h5>￥{{ item.price }}</h5>
              </router-link>
            </div>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div></div
      >
      </div>
      </el-col>

      
    </el-row>
  </div>
</template>

<script language="JavaScript">
import axios from "axios";
import Swiper from "swiper";

// import 'swiper/dist/js/swiper.min.js'
export default {
  data() {
    return {
      bookList: [],
      num: 5,
      time: 0,
      hour: "",
    };
  },
  methods: {
    //初始化swiper组件
    _initSwiper() {},
    dianji(val) {
      //点击量
      let params = new URLSearchParams();
      params.append("bookId", val);
      axios.post("/fl-book/addBookHits", params).then((res) => {});
    },
    //获取距下一小时时间
    getTime() {
      let date = new Date();
      //获取当前时间
      let now = date.getTime();
      this.hour = date.getHours();

      let minute = date.getMinutes();
      let second = date.getSeconds();
      let millisecond = date.getMilliseconds();

      this.time = (60 - minute) * (60 - second) * 1000;
    },
    getbook() {
      //随机数1~50
      let id = Math.floor(Math.random() * 50) + 1;

      axios
        .get("/fl-book/getCategoriesBooks", {
          params: {
            categoriesId: 4,
            page: 3,
            pageSize: 50,
          },
        })
        .then((res) => {
          this.bookList = res.data.data[1].records;
        });
    },
  },
  created() {
    this.num = 5;
    this.getbook();
    this.getTime();
  },
  mounted() {
    let width = 0;
    var mySwiper = new Swiper(".swiper-container", {
      slidesPerView: this.num,
      spaceBetween: 30,
      observer: true, //自动初始化组件

      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      autoplay: {
        autoplay: true,
        disableOnInteraction: false,
      },
    });

    //监听窗口宽度变化
    window.addEventListener("resize", () => {
      width = document.body.clientWidth;
   
      if(width>1700){
         this.$refs.hh.style.width=1070+'px';
      }else{
         this.$refs.hh.style.width = width * 0.8 + "px";
      }
     setTimeout(() => {
        if (width < 868) {
        this.num = 3;
      } else {
        this.num = 5;
      }
      }, 500);
     
      //获取宽度

      var mySwiper = new Swiper(".swiper-container", {
        slidesPerView: this.num,
        spaceBetween: 30,
        observer: true, //自动初始化组件

        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: {
          autoplay: true,
          disableOnInteraction: false,
        },
      });
    });
  },
};
</script>

<style lang="less">
.zhu {
  display: flex;
}
ul {
  list-style: none;
}
li {
  float: left;
}
.lianxi {
  text-align: center;
  background: #466a94a6;

  height: 250px;
  line-height: 20px;
  border-radius: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  color: #fff;
  //   .lianxi_tou {
  //     flex: 2.5;
  //   }
  //   .tu {
  //     flex: 2;
  //     i {
  //       font-size: 100px;
  //     }
  //   }
  //   .time {
  //     flex: 2;
  //   }
  //   .timeout {
  //     flex: 3;
  //   }
  i {
    font-size: 60px;
    position: absolute;
    top: 30%;
    left: 35%;
  }
  .countdown-title {
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    margin-top: 31px;
  }

  .countdown-fallback {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-top: 110px;
  }

  .countdown-desc {
    margin-top: 90px;
    font-size: 14px;
    text-align: center;
  }

  .countdown-desc strong {
    font-size: 18px;
    padding-right: 2px;
    vertical-align: middle;
    display: inline-block;
    margin-top: -1px;
  }

  .countdown-main {
    margin-left: auto;
    margin-right: auto;
    width: 130px;
    height: 30px;
    margin-top: 10px;
    display: block;
  }

  .countdown-main .timmer__unit {
    position: relative;
    border-radius: 10px;
    float: left;
    width: 30px;
    height: 30px;
    text-align: center;
    // background-color: #2f3430;
    background-color: red;
    margin-right: 20px;
    color: white;
    font-size: 20px;
    line-height: 30px;
  }

  .countdown-main .timmer__unit:after {
    content: ":";
    display: block;
    position: absolute;
    right: -20px;
    font-weight: bolder;
    font-size: 18px;
    width: 20px;
    height: 100%;
    top: 0;
  }

  .o2_ie8 .countdown-main .timmer__unit:after {
    right: -25px;
  }

  .countdown-main .timmer__unit--second {
    margin-right: 0;
  }

  .countdown-main .timmer__unit--second:after {
    content: none;
  }

  .countdown-main .cd_day {
    display: none;
  }
}

.swiper-container {
  height: 240px;
  margin-top: 10px;
  position: relative;
}

.swiper-slide {
  // margin-top: 0px;
  position: relative;

  width: 20px;
  /* text-align: center; */
  font-size: 10px;
  background: #fff;

  height: 210px;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide:hover {
  border: 0px #d9d9d9 solid;
  box-shadow: 0px 0px 6px #9a9a9a;
}

.swiper-container {
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: hsl(216, 100%, 50%); /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px;
}
.swiper-container .swiper-wrapper{
   position: relative;
}
.swiper-container .swiper-wrapper div p {
  font-size: 13px;
  text-decoration: none;
  color: #333333;
  margin-top: 20px;
  text-align: center;
}
h5 {
  font-size: 14px;
  line-height: 20px;
  margin-top: 8px;
  text-align: center;
  color: red;
  font-weight: 700;
}
</style>
